<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:comp="http://java.sun.com/jsf/composite/componentes"
	template="/template/template.xhtml">

	<f:metadata>
		<f:viewParam name="idProyecto" value="#{planOperativoBean.idProyecto}" />
		<f:event listener="#{planOperativoBean.cargarPlanOperativoDesdeProyecto}" type="preRenderView" />
	</f:metadata>

	<ui:define name="contenido">

		<h:form id="form">

			<p:outputPanel id="panelContenedor">

				<comp:barra bean="#{planOperativoBean}" renderedNuevo="false">
					<p:commandButton value="Aprobar" icon="ui-icon-trash" onclick="panelAprobar.show()" process="@this,:form:panelContenedor"
						rendered="#{!planOperativoBean.editado}">
					</p:commandButton>
					<comp:buttonExportaExcel bean="#{planOperativoBean}" tabla=":form:tablaPlanOperativo" />
				</comp:barra>

				<p:confirmDialog id="panelAprobar" header="Aprobar" widgetVar="panelAprobar" height="80" width="300" appendTo="@(body)"
					message="Esta Seguro de Aprobar el Plan Operativo">

					<center>

						<p:commandButton value="SI" action="#{planOperativoBean.aprobar}" process="@this, :form:panelContenedor" update="@this, :form:panelContenedor"
							partialSubmit="true" onclick="panelAprobar.hide()">
						</p:commandButton>

						<p:commandButton process="@this" value="NO" partialSubmit="true" onclick="panelAprobar.hide()" />

					</center>

				</p:confirmDialog>

				<p:outputPanel id="panelNuevo" rendered="#{planOperativoBean.editado}">

					<p:panel header="Crear/Editar (Plan Operativo)">

						<h:panelGrid id="panelProyecto" columns="4" columnClasses="columnaEtiqueta,columnaValor,columnaEtiqueta,columnaValor">

							<h:outputText value="Fecha:" />
							<p:calendar pattern="dd/MM/yyyy" showOn="button" navigator="true" value="#{planOperativoBean.planOperativo.fecha}" id="calFecha"
								required="true">
								<p:ajax process="@this" event="dateSelect" global="false" partialSubmit="true" />
								<p:ajax process="@this" event="change" global="false" partialSubmit="true" />
								<f:validateBean />
							</p:calendar>

							<h:outputText value="Nota:" />
							<p:inputText value="#{planOperativoBean.planOperativo.descripcion}">
								<f:validateBean />
							</p:inputText>

							<h:outputText value="Numero Proyecto:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.numero}" />

							<h:outputText value="Nombre Proyecto:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.nombre}" />

							<h:outputText value="Version:" />
							<h:outputText value="#{planOperativoBean.planOperativo.version}" />

							<h:outputText value="Estado:" />
							<h:outputText value="#{planOperativoBean.planOperativo.estado.nombre}" />

							<h:outputText value="Fecha Inicio:" />
							<h:outputText value="#{planOperativoBean.planOperativo.fechaInicio}" id="txtFechaInicio">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>

							<h:outputText value="Fecha Fin:" />
							<h:outputText value="#{planOperativoBean.planOperativo.fechaFin}" id="txtFechaFin">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>

							<h:outputText value="Lider:" />
							<h:outputText
								value="#{planOperativoBean.planOperativo.proyecto.usuario.usuaApellidos} #{planOperativoBean.planOperativo.proyecto.usuario.usuaNombres}" />

							<h:outputText value="Sucursal:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.sucursal.sucuDescripcion}" />

							<h:outputText value="Contratista:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.contratista.nombre}" />

							<h:outputText value="Lider Contratista:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.contactoContratista.nombre}" />

							<h:outputText value="Codigo DKI:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.codigoDKI}" />

							<h:outputText value="Orden Trabajo:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.ordenTrabajo}" />

							<h:outputText value="Contrato:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.contrato}" />

							<h:outputText value="Alcance:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.alcance}" />

							<h:outputText value="Direccion Obra:" />
							<h:outputText value="#{planOperativoBean.planOperativo.proyecto.direccionObra}" />

						</h:panelGrid>

						<p:spacer width="2px" />

						<p:tabView id="tabViewDetallePlanOperativo">

							<p:ajax event="tabChange" listener="#{planOperativoBean.actualizarCronograma}" update=":form:tabViewDetallePlanOperativo:panelCronograma" />

							<p:tab title="Detalle Plan Operativo">

								<h:panelGrid columns="2" style="width:100%;text-align:left">

									<h:panelGroup id="panelDetallePlanOperativo" layout="block" style="height: 435px; overflow-y: scroll !important;">

										<h:panelGroup>

											<p:commandButton value="Agregar" icon="ui-icon-plus" action="#{planOperativoBean.agregarDetallePlanOperativo}" process="@this"
												update=":form:tabViewDetallePlanOperativo:panelDetallePlanOperativo"></p:commandButton>

											<p:commandButton value="Crear Partida" icon="ui-icon-plus" actionListener="#{planOperativoBean.agregarPartida}"
												onclick="panelPartida.show()" process="@this" update=":form:tabViewDetallePlanOperativo:datosPartida" />

											<p:dialog id="panelPartida" header="Partida" widgetVar="panelPartida" height="80" width="200" appendTo="@(body)" modal="true">
												<p:outputPanel id="datosPartida">
													<h:panelGrid columnClasses="columnaEtiqueta,columnaValor" columns="2">
														<h:outputText value="Nombre:" />
														<p:inputText value="#{planOperativoBean.partida.padeNombre}" required="true">
															<p:ajax event="change" process="@this" partialSubmit="true"></p:ajax>
														</p:inputText>
													</h:panelGrid>
													<p:spacer width="5px" />
													<center>
														<p:commandButton value="Guardar" action="#{planOperativoBean.guardarPartida}" process="@this"
															update=":form:tabViewDetallePlanOperativo:panelDetallePlanOperativo" partialSubmit="true" onclick="panelPartida.hide()">
														</p:commandButton>
													</center>
												</p:outputPanel>
											</p:dialog>

										</h:panelGroup>

										<p:dataTable id="tablaDetallePlanOperativo" rowIndexVar="secuencial" emptyMessage="No exsten registros"
											value="#{planOperativoBean.listaDetallePlanOperativo}" var="_detallePlanOperativo" paginator="true" paginatorPosition="bottom"
											style="width:100%" rows="100" rowKey="#{_detallePlanOperativo.rowKey}" selection="#{planOperativoBean.detallePlanOperativoSeleccionado}"
											selectionMode="single" binding="#{planOperativoBean.dtDetallePlanOperativo}" sortBy="partida.padeNombre"
											sortOrder="ASCENDING">

											<p:ajax event="rowSelect" listener="#{planOperativoBean.seleccionarDetallePlanOperativo}"
												update=":form:tabViewDetallePlanOperativo:panelCronogramaPlanOperativo" global="false" partialSubmit="true" process="@this" />

											<p:column sortBy="partida.padeNombre" headerText="Actividad" styleClass="tableCell columnaDTNombre">
												<p:selectOneMenu styleClass="input-text" value="#{_detallePlanOperativo.partida}" id="cboPartida" converter="partidaConverter">
													<f:selectItem itemValue="" itemLabel="Seleccione.." />
													<f:selectItems value="#{planOperativoBean.listaPartidas}" var="_partida" itemLabel="#{_partida.padeNombre}" itemValue="#{_partida}" />
													<p:ajax event="change" process="@this" partialSubmit="true" />
													<f:validateBean />
												</p:selectOneMenu>
											</p:column>

											<p:column headerText="Tarea" styleClass="tableCell columnaDTNombre">
												<p:selectOneMenu styleClass="input-text" value="#{_detallePlanOperativo.concepto}" id="cboConcepto" converter="conceptoConverter">
													<f:selectItem itemValue="" itemLabel="Seleccione.." />
													<f:selectItems value="#{planOperativoBean.listaConceptos}" var="_concepto" itemLabel="#{_concepto.concRubro} - #{_concepto.concNombre}"
														itemValue="#{_concepto}" />
													<p:ajax event="change" process="@this" partialSubmit="true"
														update=":form:tabViewDetallePlanOperativo:tablaDetallePlanOperativo:txtUnidad" />
													<f:validateBean />
												</p:selectOneMenu>
											</p:column>

											<p:column headerText="Unidad" styleClass="tableCell columnaDTUnidad">
												<h:outputText value="#{_detallePlanOperativo.concepto.concUnidad}" id="txtUnidad" />
											</p:column>

											<p:column headerText="Fecha Inicio" styleClass="tableCell columnaDTFecha">
												<p:calendar style="width: 70% !important;" pattern="dd/MM/yyyy" navigator="true" value="#{_detallePlanOperativo.fechaInicio}"
													id="calFechaInicio" required="true">
													<p:ajax process="@this" event="dateSelect" global="false" partialSubmit="true"
														listener="#{planOperativoBean.seleccionarDtDetallePlanOperativo}"
														update=":form:tabViewDetallePlanOperativo:panelCronogramaPlanOperativo :form:tabViewDetallePlanOperativo:tablaDetallePlanOperativo:txtFechaFin" />
													<p:ajax process="@this" event="change" global="false" partialSubmit="true"
														listener="#{planOperativoBean.seleccionarDtDetallePlanOperativo}"
														update=":form:tabViewDetallePlanOperativo:panelCronogramaPlanOperativo :form:tabViewDetallePlanOperativo:tablaDetallePlanOperativo:txtFechaFin" />
													<f:validateBean />
												</p:calendar>
											</p:column>

											<p:column headerText="Dur. Dias" styleClass="tableCell columnaDTValor">
												<p:inputText style="text-align: right;width: 80% !important;" value="#{_detallePlanOperativo.diasTarea}" id="txtDiasTarea">
													<p:ajax event="change" process="@this" partialSubmit="true" listener="#{planOperativoBean.seleccionarDtDetallePlanOperativo}"
														update=":form:tabViewDetallePlanOperativo:panelCronogramaPlanOperativo :form:tabViewDetallePlanOperativo:tablaDetallePlanOperativo:txtFechaFin" />
													<f:validateBean />
												</p:inputText>
											</p:column>

											<p:column headerText="Fecha Fin" styleClass="tableCell columnaDTFecha">
												<h:outputText value="#{_detallePlanOperativo.fechaFin}" id="txtFechaFin">
													<f:convertDateTime pattern="dd/MM/yyyy" />
												</h:outputText>
											</p:column>

											<p:column headerText="Nota" styleClass="tableCell columnaDTDescripcion">
												<p:inputText styleClass="input-text" value="#{_detallePlanOperativo.descripcion}" id="txtNota">
													<p:ajax event="change" process="@this" partialSubmit="true" />
													<f:validateBean />
												</p:inputText>
											</p:column>

											<p:column headerText="Costo U." styleClass="tableCell columnaDTValor">
												<p:inputText styleClass="input-text-number" value="#{_detallePlanOperativo.costoUnitario}" id="txtCostoUnitario">
													<p:ajax event="change" process="@this" partialSubmit="true" listener="#{planOperativoBean.totalizar}"
														update=":form:tabViewDetallePlanOperativo:panelDetallePlanOperativo" />
													<f:validateBean />
												</p:inputText>
											</p:column>

											<p:column headerText="Cantidad" styleClass="tableCell columnaDTValor">
												<p:inputText styleClass="input-text-number" value="#{_detallePlanOperativo.cantidad}" id="txtCantidad">
													<p:ajax event="change" process="@this" partialSubmit="true" listener="#{planOperativoBean.totalizar}"
														update=":form:tabViewDetallePlanOperativo:panelDetallePlanOperativo :form:tabViewDetallePlanOperativo:panelCronogramaPlanOperativo" />
													<f:validateBean />
												</p:inputText>
											</p:column>

											<p:column headerText="Costo T." styleClass="tableCell columnaDTValor">
												<h:outputText value="#{_detallePlanOperativo.costoTarea}" id="txtCostoTarea" />
											</p:column>

											<p:column headerText="Peso" styleClass="tableCell columnaDTValor">
												<h:outputText value="#{_detallePlanOperativo.peso}" id="txtPeso" />
											</p:column>

											<p:column styleClass="tableCell columnaDTAccion">
												<p:commandButton icon="ui-icon-trash" action="#{planOperativoBean.eliminarDetallePlanOperativo(_detallePlanOperativo)}" process="@this"
													update=":form:tabViewDetallePlanOperativo:panelDetallePlanOperativo :form:tabViewDetallePlanOperativo:panelCronogramaPlanOperativo"></p:commandButton>
											</p:column>

											<p:columnGroup type="footer" id="panelTotal">
												<p:row>
													<p:column colspan="9" footerText="Total:" style="text-align:right" />
													<p:column>
														<f:facet name="footer">
															<h:outputText value="#{planOperativoBean.planOperativo.totalCostoTarea}" style="text-align:right" id="txtTotalCostoTarea" />
														</f:facet>
													</p:column>
													<p:column>
														<f:facet name="footer">
															<h:outputText value="#{planOperativoBean.planOperativo.totalPesoTarea}" style="text-align:right" id="txtTotalPesoTarea" />
														</f:facet>
													</p:column>
													<p:column />
												</p:row>
											</p:columnGroup>

										</p:dataTable>

									</h:panelGroup>

									<h:panelGroup id="panelCronogramaPlanOperativo" layout="block" style="height: 435px; overflow-y: scroll !important;">

										<p:dataTable id="tablaCronogramaPlanOperativo" binding="#{planOperativoBean.dtCronogramaPlanOperativo}"
											emptyMessage="#{msgs.msg_no_hay_datos}" value="#{planOperativoBean.listaCronogramaPlanOperativo}" var="_cronogramaPlanOperativo"
											rowKey="#{_cronogramaPlanOperativo.rowKey}" rows="100" selectionMode="single" rowIndexVar="secuencial" paginator="true"
											paginatorPosition="bottom" sortBy="fecha" sortOrder="ASCENDING">

											<f:facet name="header">
												<h:outputText value="Cronograma" />
											</f:facet>

											<p:column headerText="Fecha" styleClass="#{_cronogramaPlanOperativo.diaNoLaborable ? 'diaNoLaborable' : 'tableCell'}">
												<h:outputText value="#{_cronogramaPlanOperativo.nombreDia} " />
												<h:outputText value="#{_cronogramaPlanOperativo.fecha}">
													<f:convertDateTime pattern="dd/MM/yyyy" />
												</h:outputText>
											</p:column>

											<p:column headerText="Avance" styleClass="#{_cronogramaPlanOperativo.diaNoLaborable ? 'diaNoLaborable' : 'tableCell'}">
												<p:inputText styleClass="input-text-number" value="#{_cronogramaPlanOperativo.avance}">
													<p:ajax process="@this" partialSubmit="true"></p:ajax>
													<f:validateBean />
												</p:inputText>
											</p:column>

										</p:dataTable>

									</h:panelGroup>

								</h:panelGrid>

							</p:tab>

							<p:tab title="Cronograma">
								<h:panelGroup id="panelCronograma">
									<center>
										<p:graphicImage value="/image/?file=#{planOperativoBean.planOperativo.imagen}" width="1400px" height="400px" />
									</center>
								</h:panelGroup>
							</p:tab>

						</p:tabView>


					</p:panel>
				</p:outputPanel>

				<p:outputPanel id="panelListado" rendered="#{!planOperativoBean.editado}">

					<p:dataTable lazy="true" id="tablaPlanOperativo" rowIndexVar="secuencial" emptyMessage="No exsten registros"
						value="#{planOperativoBean.listaPlanOperativo}" var="_planOperativo" binding="#{planOperativoBean.dtPlanOperativo}" paginator="true"
						paginatorPosition="bottom" style="width:100%" rows="10" selection="#{planOperativoBean.planOperativo}" selectionMode="single"
						rowKey="#{_planOperativo.id}">

						<f:facet name="header">
							<h:outputText value="Lista (Plan Operativo)" />
						</f:facet>

						<p:column headerText="No">
							<h:outputText value="#{secuencial+1}" />
						</p:column>

						<p:column filterBy="#{_planOperativo.proyecto.numero}" sortBy="#{_planOperativo.proyecto.numero}">
							<f:facet name="header">
								<h:outputText value="Numero" />
							</f:facet>
							<h:outputText value="#{_planOperativo.proyecto.numero}" />
						</p:column>

						<p:column filterBy="#{_planOperativo.proyecto.nombre}" sortBy="#{_planOperativo.proyecto.nombre}">
							<f:facet name="header">
								<h:outputText value="Nombre" />
							</f:facet>
							<h:outputText value="#{_planOperativo.proyecto.nombre}" />
						</p:column>

						<p:column sortBy="#{_planOperativo.version}">
							<f:facet name="header">
								<h:outputText value="Version" />
							</f:facet>
							<h:outputText value="#{_planOperativo.version}" />
						</p:column>

						<p:column filterBy="#{_planOperativo.estado}" sortBy="#{_planOperativo.estado}" filterOptions="#{planOperativoBean.listaEstadoItem}">
							<f:facet name="header">
								<h:outputText value="Estado" />
							</f:facet>
							<h:outputText value="#{_planOperativo.estado.nombre}" />
						</p:column>

						<p:column sortBy="#{_planOperativo.fecha}">
							<f:facet name="header">
								<h:outputText value="Fecha" />
							</f:facet>
							<h:outputText value="#{_planOperativo.fecha}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText value="Nota" />
							</f:facet>
							<h:outputText value="#{_planOperativo.descripcion}" />
						</p:column>

					</p:dataTable>

				</p:outputPanel>

			</p:outputPanel>
		</h:form>

	</ui:define>
</ui:composition>